﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用JavaScript隐藏或显示表格列</title>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 width="80%">
    <tr>
        <td>第一列
        </td>
        <td>第二列
        </td>
        <td>第三列
        </td>
        <td>第四列
        </td>
    </tr>
    <tr>
        <td>第一列
        </td>
        <td>第二列
        </td>
        <td>第三列
        </td>
        <td>第四列
        </td>
    </tr>
</table>
<input type=button value==隐藏第三列 onclick=hide()>
<input type=button value==显示第三列 onclick=show()>

<script language="JavaScript">
    function hide(){   
        var tr = document.getElementsByTagName('tr');
        var i;
        for(i = 0;i< tr.length;i++){
         tr[i].getElementsByTagName('td')[2].style.display='none';     
        }
    } 
    
    function show(){
        var tr = document.getElementsByTagName('tr');   
        var i;
        for(i = 0;i< tr.length;i++){
            tr[i].getElementsByTagName('td')[2].style.display='block';
        }
        
    }
    
</script>

</body>
</html>